<template>
  <div class="one">
    <div class="chart-wrapper">
      <div id="pieChart" class="chart-container"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { selectDayMenuConfirm } from "@/api/progress";

// 定义响应式数据
const option = ref({
  title: {
    left: "left",
    text: "检查时间",
    //   subtext: "Fake Data",
    //   left: "center",
    top: "20%",
    textStyle: {
      color: "#fff"
    }
  },
  tooltip: {
    trigger: "item",
    formatter: '{a} {b}: {c}%',
    textStyle: {
      color: "#000"
    }
  },
  legend: {
    bottom: "15%",
    left: "left",
    textStyle: {
      color: "#fff"
    },
    //   top: 'top',
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["30%", "60%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: "bold",
            formatter: '{b}: {c}%',
            textStyle: {
              color: "#fff"
            }
          },
        },
        label: {
          show: true,
          formatter: '{b}: {c}%',
          textStyle: {
            color: "#fff"
          }
        },
        labelLine: {
          lineStyle: {
            color: "#fff"
          }
        },

      data: [
        // {
        //   value: 0,
        //   name: "未通过",
        //   itemStyle: { color: "#FFA07A" },
        // },
        // {
        //   value: 0,
        //   name: "通过",
        //   itemStyle: { color: "#98D8C8" },
        // },
      ],
    },
  ],
});

// 声明myChart变量以便在函数间共享
let myChart;

// 更新图表数据的函数
const updateChartData = (data, val1, val2) => {
  option.value.title.text = `检查时间${data.week}`;
  
  selectDayMenuConfirm({
    week: data.week,
  }).then((res) => {
    if (res.code == 200) {
      option.value.series[0].data = res.data.map(item=>{
        return {
          value: item.scale * 100,
          name: item.status == "0" ? "未审核" : item.status == "1" ? "通过" : "未通过",
        }
      })
      if (myChart) {
        myChart.setOption(option.value);
      }
    }
  });
};

// 暴露方法给父组件
defineExpose({
  updateChartData
});

onMounted(() => {
  // 初始化图表
  const chartDom = document.getElementById("pieChart");
  myChart = echarts.init(chartDom);

  // 应用配置
  myChart.setOption(option.value);

  // 监听窗口大小变化，调整图表尺寸
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
});</script>

<style lang='scss' scoped>
.one {
  width: 100%;
  height: 100%;
  //   padding: 20px;
}

.chart-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.chart-container {
  width: 80%;
  height: 100%;
  //   background-color: #f9f9f9;
  border-radius: 8px;
}
</style>
